<template>
  <div>
    <!--搜索模块-->
    <searchCard @handleSearch="handleSearch" @handleReset="handleReset">
      <el-form ref="listForm" :inline="true" :model="listQuery" size="small" label-width="100px"/>
    </searchCard>

    <div class="table-info">
      <el-card class="operate-container" shadow="never">
        <i class="el-icon-tickets"/>
        <span>数据列表</span>
        <span class="listBtn">
          <el-button
            type="primary"
            size="mini"
            @click="">列表按钮</el-button>
        </span>
      </el-card>

      <TableList :tabel-data="list" :list-loading="listLoading" :list-query="listQuery" :total="total" :table-head="TableHead" :row-handle-but="rowHandleBut" @viewDetail="viewDetail" @rowDblclick="viewDetail" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>
import { bus } from '../../../../../../bus'

export default {
  name: 'List',
  props: {
    // bus 前缀
    busNamePrefix: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      list: [],
      total: 0,
      TableHead: [
        {
          label: '序号',
          field: 'index'
        },
        {
          label: '请求单号',
          field: 'orderId'
        },
        {
          label: '状态',
          field: 'statusVal'
        },
        {
          label: '请求记录号',
          field: 'apiRequestOutRecordSn'
        },
        {
          label: '总金额',
          field: 'totalAmount'
        },
        {
          label: '核心流水号',
          field: 'coreSrlNo'
        },
        {
          label: '数量',
          field: 'count'
        },
        {
          label: '交易号',
          field: 'tradeNo'
        },
        {
          label: '发送时间',
          field: 'sendDate'
        },
        {
          label: '完成时间',
          field: 'completeDate'
        }
      ],
      rowHandleBut: [
        {
          butValue: '查看',
          butEvent: 'viewDetail',
          type: 'primary'
        }
      ],
      listQuery: {
        pageNumber: 1,
        pageSize: 20,
        sizes: 20
      },
      listLoading: false,

      // 用来存储查询时候填写得数据 ==> 一般用于某些接口执行时候需要将查询数据带过去得时候
      queryData: {}
    }
  },
  created() {
    this.busWatch()
  },
  methods: {

    // 请求数据
    getList() {
      this.listData(this.listQuery)
    },

    // 列表数据 请求
    listData(data) {
      var self = this
      listAPI(data).then(response => {
        var pageInfo = response.data.data.pageInfo
        var list = pageInfo.list
        var total = pageInfo.total

        // 计算当前页得 条码
        self.Util.tableNumber(self.listQuery.pageSize, self.listQuery.pageNumber, total, list)

        // 修改数据字典 英文 ==> 中文
        list.forEach((item) => {

        })

        self.list = list
        self.total = total
      })
    },

    // 查看详情
    viewDetail(data) {
      // 查看详情
      bus.$emit(`${this.busNamePrefix}ViewDetail`, data)
    },

    // bus 事件监听 方法集合
    busWatch() {
      var self = this
      // 监听查询按钮是否点击
      bus.$on(`${this.busNamePrefix}Query`, (data) => {
        if (data) {
          /*
          * 目前写法只支持浅拷贝
          *   如果需要深拷贝 可以再写一个通用方法
          * */
          Object.assign(self.listQuery, data)
          Object.assign(self.queryData, data)
          self.listQuery.pageNumber = 1
          self.getList()
        }
      })
    },

    // 列表中中得查询
    handleSearch() {},

    // 列表中得查询重置
    handleReset() {
      this.$refs['listForm'].resetFields()
    },

    // 分页组件使用
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },

    handleCurrentChange(val) {
      this.listQuery.pageNumber = val
      this.getList()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
